{% extends "base.html" %}

{% block content %}
<style>
/* 液态玻璃效果样式 */
.page-header {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--glass-shadow);
}

/* 液态玻璃卡片 */
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

.card-body, .card-header {
    position: relative;
    z-index: 1;
}

/* 液态玻璃表格 */
.table {
    background: transparent !important;
    color: #1C1C1E !important;
}

.table thead th {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-color: var(--glass-border) !important;
    color: #1C1C1E !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--glass-border) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.table thead th::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.table tbody td {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    transition: var(--transition) !important;
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transition: var(--transition) !important;
}

/* 液态玻璃徽章 */
.badge {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
}

.badge:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 液态玻璃按钮 */
.btn {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: var(--transition) !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

/* 添加任务按钮液态玻璃效果 */
.btn-primary {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #1C1C1E !important;
}

.btn-primary:hover::before {
    opacity: 1;
}

/* 脚本管理按钮液态玻璃效果 */
.btn-success {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.btn-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-success:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #1C1C1E !important;
}

.btn-success:hover::before {
    opacity: 1;
}

/* 液态玻璃标题 */
h2, h5, h6 {
    color: #1C1C1E !important;
    text-shadow: 0 2px 4px rgba(0, 122, 255, 0.1);
}

/* 液态玻璃图标 */
.fas {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: var(--transition);
}

.card:hover .fas {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* 液态玻璃空状态 */
.text-center.py-4 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--glass-border);
    margin: 1rem 0;
}

/* 液态玻璃代码块 */
code {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    color: #1C1C1E;
    font-size: 0.875em;
}

/* 暗黑模式适配 */
[data-theme="dark"] .page-header {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .page-header::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .card {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .table thead th {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .table thead th::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .table tbody td {
    color: #ffffff !important;
}

[data-theme="dark"] .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] h2, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: #ffffff !important;
}

[data-theme="dark"] .text-center.py-4 {
    background: rgba(0, 0, 0, 0.2);
}

/* 暗色模式按钮适配 */
[data-theme="dark"] .btn-primary {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .btn-primary::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
}

[data-theme="dark"] .btn-primary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .btn-success {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .btn-success::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
}

[data-theme="dark"] .btn-success:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .text-muted {
    color: #bdc3c7 !important;
}

[data-theme="dark"] code {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

[data-theme="dark"] .text-danger {
    color: #ff6b6b !important;
}

[data-theme="dark"] .text-success {
    color: #51cf66 !important;
}

/* 液态玻璃动画 */
@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.card {
    animation: cardFloat 6s ease-in-out infinite;
}

.card:nth-child(2) {
    animation-delay: 1s;
}

.card:nth-child(3) {
    animation-delay: 2s;
}

.card:nth-child(4) {
    animation-delay: 3s;
}

/* 液态玻璃响应式 */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
    
    .table-responsive {
        border-radius: var(--border-radius-sm);
        overflow: hidden;
    }
}
</style>

<div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
        <h2><i class="fas fa-clock me-2"></i>用户自定义定时任务管理</h2>
        <div class="d-flex gap-2">
            <a href="{{ url_for('add_custom_task') }}" class="btn btn-primary">
                <i class="fas fa-plus me-1"></i>添加任务
            </a>
            <a href="{{ url_for('extended_scripts') }}" class="btn btn-success">
                <i class="fas fa-upload me-1"></i>脚本管理
            </a>
        </div>
    </div>
</div>


<!-- 任务列表 -->
<div class="card">
    <div class="card-header">
        <h5 class="mb-0"><i class="fas fa-list me-2"></i>任务列表</h5>
    </div>
    <div class="card-body">
        {% if tasks %}
            <div class="table-responsive">
                <table class="table table-hover table-sm">
                    <style>
                        .table-sm td, .table-sm th {
                            padding: 0.3rem 0.5rem;
                            font-size: 0.875rem;
                            line-height: 1.1;
                        }
                        .table-sm .badge {
                            font-size: 0.75rem;
                            padding: 0.25rem 0.5rem;
                        }
                        .table-sm code {
                            font-size: 0.8rem;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            max-width: 120px;
                            display: inline-block;
                        }
                        .table-sm .btn-sm {
                            padding: 0.25rem 0.5rem;
                            font-size: 0.75rem;
                        }
                        .table-sm .btn-group-sm > .btn {
                            padding: 0.25rem 0.5rem;
                            font-size: 0.75rem;
                        }
                    </style>
                    <thead>
                        <tr>
                            <th>任务名称</th>
                            <th>归属用户</th>
                            <th>脚本</th>
                            <th>Cron表达式</th>
                            <th>下次执行时间</th>
                            <th>状态</th>
                            <th>最后执行</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for task in tasks %}
                        <tr>
                            <td>
                                <strong>{{ task.name }}</strong>
                            </td>
                            <td>
                                <span class="badge bg-secondary">{{ task.user.username }}</span>
                            </td>
                            <td>
                                {% if task.script %}
                                    <span class="badge bg-info">{{ task.script.name }}</span>
                                {% else %}
                                    <span class="text-danger">脚本已删除</span>
                                {% endif %}
                            </td>
                            <td>
                                <code title="{{ task.cron_expression }}">{{ task.cron_expression }}</code>
                            </td>
                            <td class="next-run-time">
                                {% if task.is_active and task.cron_expression %}
                                    {% if task.next_run_time %}
                                        {{ task.next_run_time.strftime('%Y-%m-%d %H:%M:%S') }}
                                    {% else %}
                                        <!-- 使用后端计算的值，避免在前端计算 -->
                                        <span title="任务已激活，等待下次执行">计算中...</span>
                                    {% endif %}
                                {% else %}
                                    <span class="text-muted">未激活</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if task.is_active %}
                                    <span class="badge bg-success">已启用</span>
                                {% else %}
                                    <span class="badge bg-secondary">已禁用</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if task.last_run_time %}
                                    <div>{{ task.last_run_time.strftime('%Y-%m-%d %H:%M:%S') }}</div>
                                    {% if task.last_run_status %}
                                        <small class="text-{{ 'success' if task.last_run_status == '成功' else 'danger' }}">
                                            {{ task.last_run_status }}
                                        </small>
                                    {% endif %}
                                {% else %}
                                    <span class="text-muted">未执行</span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="d-flex flex-column gap-1">
                                    <!-- 第一行按钮 -->
                                    <div class="btn-group btn-group-sm" role="group">
                                        {% if task.script and task.is_active %}
                                            <button class="btn btn-sm btn-outline-primary" onclick="runCustomTask({{ task.id }})">
                                                <i class="fas fa-play"></i>
                                            </button>
                                        {% endif %}
                                        
                                        <a href="{{ url_for('edit_custom_task', task_id=task.id) }}" 
                                           class="btn btn-sm btn-outline-secondary">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        
                                        <a href="{{ url_for('custom_task_logs', task_id=task.id) }}" 
                                           class="btn btn-sm btn-outline-info">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </div>
                                    <!-- 第二行按钮 -->
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{{ url_for('toggle_custom_task', task_id=task.id) }}" 
                                           class="btn btn-sm btn-outline-{{ 'warning' if task.is_active else 'success' }}"
                                           onclick="return confirm('确定要{{ '禁用' if task.is_active else '启用' }}此任务吗？')">
                                            <i class="fas fa-{{ 'pause' if task.is_active else 'play' }}"></i>
                                        </a>
                                        
                                        <a href="{{ url_for('delete_custom_task_page', task_id=task.id) }}" 
                                           class="btn btn-sm btn-outline-danger"
                                           onclick="return confirm('确定要删除此任务吗？此操作不可恢复！')">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="text-center py-4">
                <i class="fas fa-clock fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">暂无定时任务</h5>
                <p class="text-muted">点击"添加任务"按钮创建您的第一个定时任务</p>
                <a href="{{ url_for('add_custom_task') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-1"></i>添加任务
                </a>
            </div>
        {% endif %}
    </div>
</div>

<!-- 使用说明 -->
<div class="card mt-4">
    <div class="card-header">
        <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>使用说明</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <h6>Cron表达式格式</h6>
                <p class="text-muted">使用标准5字段cron表达式：</p>
                <ul class="text-muted">
                    <li><code>* * * * *</code> - 每分钟执行</li>
                    <li><code>0 * * * *</code> - 每小时执行</li>
                    <li><code>0 0 * * *</code> - 每天0点执行</li>
                    <li><code>0 0 * * 0</code> - 每周日0点执行</li>
                    <li><code>0 0 1 * *</code> - 每月1号0点执行</li>
                </ul>
            </div>
            <div class="col-md-6">
                <h6>脚本要求</h6>
                <p class="text-muted">脚本应该能够独立运行：</p>
                <ul class="text-muted">
                    <li>支持无参数执行</li>
                    <li>包含适当的错误处理</li>
                    <li>使用sys.exit(0)表示成功</li>
                    <li>使用sys.exit(1)表示失败</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function runCustomTask(taskId) {
    console.log('执行任务:', taskId);
    console.log('请求URL:', '/api/run_custom_task/' + taskId);
    
    // 显示加载状态 - 使用页面上的提示而不是弹窗
    const loadingIndicator = document.createElement('div');
    loadingIndicator.className = 'position-fixed top-0 start-0 w-100 bg-info text-white p-2 text-center';
    loadingIndicator.style.zIndex = '9999';
    loadingIndicator.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>正在执行任务，请稍候...';
    document.body.appendChild(loadingIndicator);
    
    fetch('/api/run_custom_task/' + taskId, {
        method: 'POST',
        credentials: 'same-origin' // 确保发送cookies
    })
    .then(function(response) {
        console.log('响应状态:', response.status);
        console.log('响应头:', JSON.stringify(Array.from(response.headers.entries())));
        return response.json().catch(function(e) {
            console.error('解析JSON失败:', e);
            return {error: '无法解析响应数据'};
        });
    })
    .then(function(data) {
        console.log('响应数据:', JSON.stringify(data));
        // 移除加载指示器
        document.body.removeChild(loadingIndicator);
        
        // 重定向到当前页面，让后端的flash消息显示
        let redirectUrl = window.location.pathname + '?task_executed=' + taskId;
        if (data.success) {
            redirectUrl += '&status=success';
        } else {
            redirectUrl += '&status=error&message=' + encodeURIComponent(data.error || data.message || '未知错误');
        }
        window.location.href = redirectUrl;
    })
    .catch(function(err) {
        console.error('请求错误:', err);
        // 移除加载指示器
        document.body.removeChild(loadingIndicator);
        // 重定向并传递错误信息
        let redirectUrl = window.location.pathname + '?task_executed=' + taskId + 
            '&status=error&message=' + encodeURIComponent('请求失败: ' + err);
        window.location.href = redirectUrl;
    });
}
</script>
{% endblock %}